<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交互式学习：成本法转权益法</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <!-- Chosen Palette: Warm Neutral Harmony -->
    <!-- Application Structure Plan: A task-oriented, guided simulation. Users navigate through a fixed sequence of steps (Split, Gain/Loss, Adjust) using a side navigation panel. This linear, chunked approach is ideal for teaching a complex, multi-step accounting process to beginners, preventing overwhelm and ensuring each concept is understood before moving to the next. The focus is on active learning by revealing information step-by-step. -->
    <!-- Visualization & Content Choices:
        - Report Info: Investment Split (6300 -> 3600 + 2700) -> Goal: Compare -> Viz: Doughnut Chart -> Interaction: Displayed on step 1 -> Justification: Visually shows the proportional division of the original asset -> Library: Chart.js.
        - Report Info: Disposal Gain/Loss (4000 vs 3600) -> Goal: Compare -> Viz: Bar Chart -> Interaction: Displayed on step 2 -> Justification: Clearly shows the difference between proceeds and cost -> Library: Chart.js.
        - Report Info: Retrospective Adjustment (2700 vs 3000) -> Goal: Compare -> Viz: Bar Chart -> Interaction: Displayed on step 3A -> Justification: Highlights the "bargain purchase" element of the adjustment -> Library: Chart.js.
        - Report Info: Journal Entries -> Goal: Inform/Organize -> Viz: Styled HTML tables -> Interaction: Displayed on relevant steps -> Justification: Standard, clear format for accounting entries -> Library/Method: HTML/Tailwind.
        - Report Info: Step-by-step logic -> Goal: Organize/Inform -> Viz: Interactive stepper/navigation -> Interaction: Click to reveal content -> Justification: Guides the user through the process sequentially -> Library/Method: JS/HTML/Tailwind.
         -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8f9fa;
        }
        .step-active {
            background-color: #3b82f6;
            color: white;
            transform: translateX(4px);
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }
        .content-panel {
            display: none;
        }
        .content-panel.active {
            display: block;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            height: 300px;
            max-height: 40vh;
        }
        .journal-entry {
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            overflow: hidden;
            background-color: white;
        }
        .journal-header, .journal-row {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            padding: 0.75rem 1.25rem;
            align-items: center;
        }
        .journal-header {
            background-color: #f3f4f6;
            font-weight: 700;
            color: #374151;
        }
        .journal-row {
            border-top: 1px solid #e5e7eb;
        }
        .journal-row .account {
            padding-left: 1rem;
        }
        .journal-row .credit .account {
            padding-left: 2.5rem;
        }
        .debit-col, .credit-col {
            text-align: right;
        }
    </style>
</head>
<body class="text-gray-800">

    <div class="container mx-auto p-4 md:p-8">
        <header class="text-center mb-8">
            <h1 class="text-3xl md:text-4xl font-bold text-gray-900">长期股权投资：成本法转权益法</h1>
            <p class="mt-2 text-lg text-gray-600">一个交互式学习指南</p>
        </header>

        <div class="bg-blue-50 border-l-4 border-blue-500 text-blue-800 p-4 rounded-md mb-8 shadow-sm">
            <h2 class="font-bold text-xl mb-2">学习场景介绍</h2>
            <p>在本案例中，我们将跟随甲公司的脚步，处理一项因出售部分股权而引发的会计核算方法转换。甲公司最初能够**控制**乙公司（使用成本法），出售后转为对乙公司具有**重大影响**（需改用权益法）。这个应用将带您完整地走完个别财务报表中的所有会计处理步骤。</p>
        </div>

        <main class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <aside class="md:col-span-1">
                <nav class="sticky top-8 bg-white p-4 rounded-lg shadow-md">
                    <h3 class="font-bold text-lg mb-4">会计处理步骤</h3>
                    <ul class="space-y-2">
                        <li><a href="#step1" class="step-link block w-full text-left p-3 rounded-md transition-all duration-200 ease-in-out">1. 拆分投资成本</a></li>
                        <li><a href="#step2" class="step-link block w-full text-left p-3 rounded-md transition-all duration-200 ease-in-out">2. 计算处置损益</a></li>
                        <li><a href="#step3" class="step-link block w-full text-left p-3 rounded-md transition-all duration-200 ease-in-out">3. 追溯调整剩余股权</a></li>
                    </ul>
                </nav>
            </aside>

            <div class="md:col-span-3 space-y-12">
                <!-- Step 1: Split Investment -->
                <section id="step1" class="content-panel bg-white p-6 rounded-lg shadow-lg">
                    <h2 class="text-2xl font-bold mb-4 text-blue-700">第一步：拆分投资成本</h2>
                    <p class="mb-6 text-gray-600">首先，我们需要将原始投资的账面价值，按照处置和剩余的股权比例，拆分成两部分。这就像把一个大蛋糕切成两块，一块卖掉，一块留下。</p>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-center">
                        <div>
                            <div class="space-y-4">
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <p class="text-sm text-gray-500">处置的40%股权对应账面价值</p>
                                    <p class="text-2xl font-bold text-red-600">3,600万元</p>
                                    <p class="text-xs text-gray-500 mt-1">计算: 6300 × (40% / 70%)</p>
                                </div>
                                <div class="p-4 bg-gray-50 rounded-lg">
                                    <p class="text-sm text-gray-500">剩余的30%股权对应账面价值</p>
                                    <p class="text-2xl font-bold text-green-600">2,700万元</p>
                                    <p class="text-xs text-gray-500 mt-1">计算: 6300 × (30% / 70%)</p>
                                </div>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="splitChart"></canvas>
                        </div>
                    </div>
                </section>

                <!-- Step 2: Calculate Gain/Loss -->
                <section id="step2" class="content-panel bg-white p-6 rounded-lg shadow-lg">
                    <h2 class="text-2xl font-bold mb-4 text-blue-700">第二步：计算处置损益</h2>
                    <p class="mb-6 text-gray-600">接下来，我们将收到的价款与被处置股权的账面价值进行比较，来确定这笔交易是赚了还是亏了。差额将计入当期损益。</p>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-center">
                        <div class="chart-container">
                            <canvas id="gainLossChart"></canvas>
                        </div>
                        <div>
                             <div class="p-4 bg-gray-50 rounded-lg mb-4">
                                <p class="text-sm text-gray-500">投资收益</p>
                                <p class="text-2xl font-bold text-green-600">400万元</p>
                                <p class="text-xs text-gray-500 mt-1">计算: 4000 (售价) - 3600 (成本)</p>
                            </div>
                            <h3 class="text-xl font-semibold mb-3">会计分录</h3>
                            <div class="journal-entry">
                                <div class="journal-header"><span>会计科目</span><span class="debit-col">借方</span><span class="credit-col">贷方</span></div>
                                <div class="journal-row debit"><span class="account">银行存款</span><span class="debit-col">4,000</span><span class="credit-col"></span></div>
                                <div class="journal-row credit"><span class="account">长期股权投资</span><span class="debit-col"></span><span class="credit-col">3,600</span></div>
                                <div class="journal-row credit"><span class="account">投资收益</span><span class="debit-col"></span><span class="credit-col">400</span></div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Step 3: Retrospective Adjustment -->
                <section id="step3" class="content-panel bg-white p-6 rounded-lg shadow-lg">
                    <h2 class="text-2xl font-bold mb-4 text-blue-700">第三步：追溯调整剩余股权</h2>
                    <p class="mb-6 text-gray-600">这是最关键的一步。我们需要“穿越”回最初投资的时点，假定剩余的30%股权从一开始就是用权益法核算的，并对期间发生的变动进行补充调整。</p>
                    
                    <div class="space-y-8">
                        <!-- Step 3A -->
                        <div>
                            <h3 class="text-xl font-semibold mb-3 border-l-4 border-blue-500 pl-3">步骤 A: 调整初始投资成本</h3>
                            <p class="mb-4 text-gray-600">比较剩余股权的名义成本与应享有的被投资单位可辨认净资产公允价值份额。我们发现“少花钱，多办事”了，需要调增长期股权投资的价值。</p>
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-center">
                                <div class="chart-container">
                                    <canvas id="adjustmentChartA"></canvas>
                                </div>
                                <div>
                                    <div class="p-4 bg-gray-50 rounded-lg mb-4">
                                        <p class="text-sm text-gray-500">初始成本调整额 (差额)</p>
                                        <p class="text-2xl font-bold text-green-600">300万元</p>
                                        <p class="text-xs text-gray-500 mt-1">计算: (10000 × 30%) - 2700</p>
                                    </div>
                                    <h4 class="font-bold mb-2">会计分录 (追溯调整1)</h4>
                                    <div class="journal-entry">
                                        <div class="journal-header"><span>会计科目</span><span class="debit-col">借方</span><span class="credit-col">贷方</span></div>
                                        <div class="journal-row debit"><span class="account">长期股权投资—投资成本</span><span class="debit-col">300</span><span class="credit-col"></span></div>
                                        <div class="journal-row credit"><span class="account">盈余公积</span><span class="debit-col"></span><span class="credit-col">30</span></div>
                                        <div class="journal-row credit"><span class="account">利润分配—未分配利润</span><span class="debit-col"></span><span class="credit-col">270</span></div>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-2">注：因追溯以前年度损益，故调整留存收益，而非营业外收入。</p>
                                </div>
                            </div>
                        </div>

                        <!-- Step 3B -->
                        <div>
                            <h3 class="text-xl font-semibold mb-3 border-l-4 border-blue-500 pl-3">步骤 B: 调整期间净利润</h3>
                            <p class="mb-4 text-gray-600">确认在持有期间（2023年），应享有的被投资单位实现的净利润份额。</p>
                             <div class="p-4 bg-green-50 border border-green-200 rounded-lg mb-4 text-center">
                                <p class="text-sm text-gray-500">应享有2023年净利润份额</p>
                                <p class="text-3xl font-bold text-green-700">150万元</p>
                                <p class="text-sm text-gray-600 mt-1">计算: 500万元 (乙公司净利润) × 30%</p>
                            </div>
                            <h4 class="font-bold mb-2">会计分录 (追溯调整2)</h4>
                            <div class="journal-entry">
                                <div class="journal-header"><span>会计科目</span><span class="debit-col">借方</span><span class="credit-col">贷方</span></div>
                                <div class="journal-row debit"><span class="account">长期股权投资—损益调整</span><span class="debit-col">150</span><span class="credit-col"></span></div>
                                <div class="journal-row credit"><span class="account">盈余公积</span><span class="debit-col"></span><span class="credit-col">15</span></div>
                                <div class="journal-row credit"><span class="account">利润分配—未分配利润</span><span class="debit-col"></span><span class="credit-col">135</span></div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">注：因追溯以前年度损益，故调整留存收益，而非投资收益。</p>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const steps = [
                { id: 'step1', chart: createSplitChart },
                { id: 'step2', chart: createGainLossChart },
                { id: 'step3', chart: createAdjustmentChartA }
            ];

            const links = document.querySelectorAll('.step-link');
            const panels = document.querySelectorAll('.content-panel');
            let activeChartInstances = {};

            function showStep(targetId) {
                const stepId = targetId.substring(1);

                links.forEach(link => {
                    if (link.getAttribute('href') === targetId) {
                        link.classList.add('step-active');
                    } else {
                        link.classList.remove('step-active');
                    }
                });

                panels.forEach(panel => {
                    if (panel.id === stepId) {
                        panel.classList.add('active');
                    } else {
                        panel.classList.remove('active');
                    }
                });

                // Destroy old charts to prevent memory leaks and bugs
                Object.values(activeChartInstances).forEach(chart => chart.destroy());
                activeChartInstances = {};

                // Create new chart for the active step
                const activeStep = steps.find(s => s.id === stepId);
                if (activeStep && activeStep.chart) {
                    activeStep.chart();
                }
            }

            links.forEach(link => {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    showStep(targetId);
                     // Scroll to the top of the content area for better UX on mobile
                    document.querySelector('.md\\:col-span-3').scrollIntoView({ behavior: 'smooth', block: 'start' });
                });
            });

            function createSplitChart() {
                const ctx = document.getElementById('splitChart').getContext('2d');
                if (activeChartInstances.split) activeChartInstances.split.destroy();
                activeChartInstances.split = new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        labels: ['处置的40%股权 (3600万)', '剩余的30%股权 (2700万)'],
                        datasets: [{
                            label: '原始投资成本拆分 (总计 6300万)',
                            data: [3600, 2700],
                            backgroundColor: ['#ef4444', '#22c55e'],
                            borderColor: '#ffffff',
                            borderWidth: 3
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            title: {
                                display: true,
                                text: '原始投资成本拆分 (总计 6300万)',
                                font: { size: 16 }
                            },
                            legend: {
                                position: 'bottom',
                            },
                        }
                    }
                });
            }

            function createGainLossChart() {
                const ctx = document.getElementById('gainLossChart').getContext('2d');
                if (activeChartInstances.gainLoss) activeChartInstances.gainLoss.destroy();
                activeChartInstances.gainLoss = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: [''],
                        datasets: [
                            {
                                label: '取得价款',
                                data: [4000],
                                backgroundColor: '#22c55e',
                            },
                            {
                                label: '处置部分账面价值',
                                data: [3600],
                                backgroundColor: '#ef4444',
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                           title: {
                                display: true,
                                text: '处置损益计算',
                                font: { size: 16 }
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        let label = context.dataset.label || '';
                                        if (label) {
                                            label += ': ';
                                        }
                                        if (context.parsed.y !== null) {
                                            label += new Intl.NumberFormat('zh-CN').format(context.parsed.y) + '万元';
                                        }
                                        return label;
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return value + '万';
                                    }
                                }
                            }
                        }
                    }
                });
            }

            function createAdjustmentChartA() {
                const ctx = document.getElementById('adjustmentChartA').getContext('2d');
                if (activeChartInstances.adjA) activeChartInstances.adjA.destroy();
                activeChartInstances.adjA = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: [''],
                        datasets: [
                            {
                                label: '应享有净资产份额',
                                data: [3000],
                                backgroundColor: '#3b82f6',
                            },
                            {
                                label: '剩余股权名义成本',
                                data: [2700],
                                backgroundColor: '#f97316',
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            title: {
                                display: true,
                                text: '初始投资成本比较',
                                font: { size: 16 }
                            },
                             tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        let label = context.dataset.label || '';
                                        if (label) {
                                            label += ': ';
                                        }
                                        if (context.parsed.y !== null) {
                                            label += new Intl.NumberFormat('zh-CN').format(context.parsed.y) + '万元';
                                        }
                                        return label;
                                    }
                                }
                            }
                        },
                         scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return value + '万';
                                    }
                                }
                            }
                        }
                    }
                });
            }

            // Show the first step by default
            showStep('#step1');

        });
    </script>
</body>
</html>
